<style lang="less">
/* .select_list {
	.van-field__body{
		margin-right: -50px;
		.van-field__control{
			margin-right: -50px;
		}
		.van-field__icon {
			.van-icon{
				padding: 0 50px;
			}
		}
	}
} */
</style>

<template>
	<div>
		<van-cell-group class="mt10">
	        <van-field
	        	v-model="formItem.defectAddress"
	            center
	            clearable
	            label="缺陷地点"
	            required
	            disabled>
	            <!-- <van-button slot="button" size="mini" plain type="primary" @click="getAddress">{{address}}</van-button> -->
	        </van-field>
	        <van-field
	        	v-model="defectType"
	            center
	            clearable
	            label="缺陷类型"
	            required
	            disabled>
	            <van-button slot="button" size="mini" plain type="default">{{this.$route.query.name}}</van-button>
	        </van-field>
	    
	        <van-field
				class="select_list"
	        	v-model="formItem.defectNature"
	            icon="arrow"
	            label="缺陷定性"
	            placeholder="请选择"
	            @click-icon="showDefectNature"
	            required
				disabled
				/>

	        <van-field
				class="select_list"
	        	v-model="formItem.defectLevel"
	            icon="arrow"
	            label="缺陷级别"
	            placeholder="请选择"
	            @click-icon="showDefectLevel"
	            required
				disabled/>    
	
	        <van-field
				class="detail_item"
	            clearable
	            label="缺陷内容"
	            required
	            disabled>
			    <van-icon slot="icon" class="slot-cont">
					<p class="text_holder">
	                    <textarea
							placeholder="手动输入，例如：上相大号侧路线串高压端均压坏缺半面"
							v-model="formItem.defectInfo" />
					</p>
				</van-icon>
	        </van-field>
				<van-field
				class="select_list"
	        	v-model="formItem.defectReason"
	            icon="arrow"
	            label="原因分析"
	            placeholder="请选择"
	            @click-icon="showDefectReason"
	            required
				disabled/>
	    </van-cell-group>
		<!--缺陷定性选择弹出模态-->
		<van-popup v-model="defectNatureFlag" position="bottom" :overlay="true">
            <van-picker
                :columns="defectNatureColumns"
                :columns-num="5"
                :show-toolbar="true"
                value-key='CHARACTERIZATION_NAME'
                @change="defectNatureChange"
                @confirm="defectNatureConfirm" 
                @cancel="defectNatureCancel">
            </van-picker>
        </van-popup>

        <van-popup v-model="defectLevelFlag" position="bottom" :overlay="true">
            <van-picker
            	:columns="defectLevelColumns"
            	:columns-num="5"
            	:show-toolbar="true"
            	value-key='CHARACTERIZATION_NAME'
            	@change="defectLevelChange"
            	@confirm="defectLevelConfirm" 
                @cancel="defectLevelCancel">
            </van-picker>	 
        </van-popup>
		<!-- 原因分析选择弹出模态 -->
		<van-popup v-model="defectReasonFlag" position="bottom" :overlay="true">
            <van-picker
            	:columns="defectReasonColumns"
            	:columns-num="1"
				:show-toolbar="true"
            	@change="defectReasonChange"
            	@confirm="defectReasonConfirm" 
                @cancel="defectReasonCancel">
            </van-picker>	 
        </van-popup>

		<!-- 缺陷照片插槽 start-->
		<div slot="photo1">
			<slot name="quexian_photo_slot"></slot>
		</div>
		<!-- 缺陷照片插槽 end-->

		<!-- 是否处理插槽 start-->
		<div slot="photo2">
			<slot name="chuli_photo_slot"></slot>
		</div>
		<!-- 是否处理插槽 end-->

		<!--点击上传-->
		<van-button size="large" type="primary" class="upload" @click="upLoad">上传</van-button>
	</div>
</template>

<script>
import { fileData,callData } from '../../../axios/axios'
import { getLocation } from '../../../api/android'
import AsyncValidator from "async-validator"

import {
    CellGroup,
    Field,
    Button,
    Icon,
    Picker,
	Popup,
	Toast
} from 'vant'

export default {
    name: 'addQuexian',
    components: {
        [CellGroup.name]: CellGroup,
        [Field.name]: Field,
        [Button.name]: Button,
        [Icon.name]: Icon,
        [Picker.name]: Picker,
        [Popup.name]: Popup
    },
    data() {
        return {
			address: '获取',				//获取地理位置
			childNodeId: '',            //子节点ID
			defectType: '',			    //缺陷类型
			defectNatureFlag: false,  	//缺陷定性选择弹出模态
			defectLevelFlag: false,		//缺陷级别选择弹出模态
			defectReasonFlag: false,	//缺陷原因分析选择弹出模态
			defectNatureColumns: [],	//缺陷定性级联列表绑定数据
			treeJsonArray: [],			//缺陷定性级联树结构
			defectLevelObj: {},			//缺陷级别下拉选择列表
			defectLevelColumns: [],     //缺陷定性级联列表绑定数据
			defectReasonColumns: [],	//缺陷原因分析
			DefectPhotos: [],           //缺陷处理照片
			processing: [],             //是否处理照片
            jdwdMeg: {
            	lon:'00.000000',
            	lat:'00.000000',
            	address:''
			},						//经度纬度加地址
			formItem: {
				jd:'',
				wd:'',
				defectAddress: this.$route.query.lineName+' - '+this.$route.query.towerName,//缺陷地点
				defectNature: '',		    //缺陷定性
				defectInfo: '',			    //缺陷内容
				defectLevel: '',			//缺陷级别
				defectReason: '',		    //原因分析
			},
			rules: {
				defectAddress:{required:true,message:'缺陷地点不可为空'},
            	defectNature:{required:true,message:'缺陷定性不可为空'},
				defectLevel:{required:true,message:'缺陷级别不可为空'},
				defectInfo:{required:true,message:'缺陷内容不可为空'},
				defectReason:{required:true,message:'原因分析不可为空'}
           	},
        }
    },
    methods: {
		// 点击上传按钮 
		upLoad() {
			var validator = new AsyncValidator(this.rules);
			validator.validate(this.formItem,(valid)=>{
				if (!valid) {// 验证通过
					this.$emit('upLoad', this.formItem)
				} else {// 验证失败
					Toast.fail(valid[0].message);
				}
			});
		},
    	// 返回给父组件数据
    	putData(){
			let params = {}
				params.defectType = this.defectType
    			params.jdwdMeg = this.jdwdMeg
    			params.defectNature = this.formItem.defectNature
				params.defectInfo = this.formItem.defectInfo
    			params.defectLevel = this.formItem.defectLevel
    			params.defectReason = this.formItem.defectReason
				params.childNodeId = this.childNodeId
    		this.$emit('getQuexianData', params)
    	},
    	// 得到原因分析输入的
    	/* getDefectReason(val){
    		this.formItem.defectReason = val.target.value
    		this.putData()
		}, */
        // 请求缺陷定性数据
        getData() {
            var _this = this;
			callData('/accountServer/CmDefectCharacterization/findCmDefectCharacterizationByPid', 'get', {
				pid : _this.$route.query.defectType
			}).then(data => {
				if(data.data && data.data.length > 0){
					if(data.data[0].PID && data.data[0].PID == -1){
	            		_this.treeJsonArray = _this.ToTreeJson(data.data,data.data[0].ID);
	            		if(_this.treeJsonArray && _this.treeJsonArray.length > 0){
							_this.defectNatureColumns.push({values: _this.treeJsonArray,defaultIndex:0});
							if(_this.treeJsonArray[0].children && _this.treeJsonArray[0].children.length > 0){
								_this.defectNatureColumns.push({values: _this.treeJsonArray[0].children,defaultIndex:0});
								if(_this.treeJsonArray[0].children[0].children && _this.treeJsonArray[0].children[0].children.length > 0){
									_this.defectNatureColumns.push({values:_this.treeJsonArray[0].children[0].children,defaultIndex:0});
								}
							}
	            		}
	            	}else{
	            		console.error("父级ID返回异常！！！");
	            		return;
	            	}
				}
			})
		},
		ToTreeJson(data,pid){
        	var _this = this;
        	var result = [];
            for (var i in data) {
                if (data[i].PID == pid) {
                    result.push(data[i]);
                    var temp = _this.ToTreeJson(data,data[i].ID);
                    if (temp.length > 0) {
                        data[i].children = temp;
                    }
                }
            }
            return result;
		},
        showDefectLevel(){
            this.defectLevelFlag = true;
        },
        //缺陷定性选择改变时触发事件
        defectNatureChange(picker,values,index){
        	var _this = this;
        	if(index == 0){
        		if(values[0].children && values[0].children.length > 0){
        			picker.setColumnValues((index+1), values[0].children);
        			if(values[0].children[0].children && values[0].children[0].children.length > 0){
        				picker.setColumnValues((index+2),values[0].children[0].children);
        			}else{
        				picker.setColumnValues((index+2), []);
        			}
        		}else{
        			picker.setColumnValues((index+1), []);
        		}
        	}else{
        		if(values[1].children && values[1].children.length > 0){
        			picker.setColumnValues((index+1), values[1].children);
        		}else{
        			picker.setColumnValues((index+1), []);
        		}
        	}
        },
        //缺陷定性选择模态框打开
        showDefectNature(){
            this.defectNatureFlag = true;
        },
        //缺陷定性选择模态框确认按钮点击事件
        defectNatureConfirm(selected){
            var _this = this;
            _this.formItem.defectNature = "";
            selected.forEach(function(val,i,arr){
            	if(val){
            		_this.formItem.defectNature = _this.formItem.defectNature + val.CHARACTERIZATION_NAME + "-"; 
            	}
            })
            _this.formItem.defectNature = _this.formItem.defectNature.substr(0,_this.formItem.defectNature.length-1);
            var selectedNatureId = (selected[selected.length-1] && selected[selected.length-1].ID) ? selected[selected.length-1].ID : 
            ((selected[selected.length-2] && selected[selected.length-2].ID) ? selected[selected.length-2].ID : '');
            
            _this.defectNatureId = (selectedNatureId && selectedNatureId!='')?selectedNatureId:null;
            if(_this.defectNatureId){
            	callData('/accountServer/CmDefectCharacterization/findDefectSort', 'get', {
					pid : _this.defectNatureId
				}).then(data => {
					_this.defectLevelObj = {};
					data.data.forEach(function(val,i,arr){
						if(!_this.defectLevelObj[val.DEFECT_SORT] && !Array.isArray(_this.defectLevelObj[val.DEFECT_SORT])){
							_this.defectLevelObj[val.DEFECT_SORT] = [];
						}
						_this.defectLevelObj[val.DEFECT_SORT].push(val);
					});
					_this.defectLevelColumns = [
						{
							values: Object.keys(_this.defectLevelObj),
	          				defaultIndex: 0
						},
						{
							values: _this.defectLevelObj[Object.keys(_this.defectLevelObj)[0]],
	          				defaultIndex: 0
						}
					]
					this.defectNatureFlag = false;
				})
				_this.putData()
            }
        },
        //缺陷定性选择模态框取消按钮点击事件
        defectNatureCancel(){
            this.defectNatureFlag = false;
        },
        defectLevelChange(picker, values, index){
        	var _this = this;
            picker.setColumnValues(index+1,_this.defectLevelObj[values[0]]);
        },
        defectLevelConfirm(selected){
        	var _this = this;
        	_this.formItem.defectLevel = selected[0];
            _this.formItem.defectInfo = selected[1].CHARACTERIZATION_NAME;
            _this.childNodeId = selected[1].ID;
            _this.defectLevelFlag = false;
           this.putData()
        },
        defectLevelCancel(){
        	this.defectLevelFlag = false;
		},
		// 原因分析弹出框
		showDefectReason(val){
			this.defectReasonFlag = true;
			this.putData()
			callData('/accountServer/CmDataDictionary/findDataType','get',{
				dataType:"0"
			}).then(data => {
				const causeArr = [];
				data.data.forEach(function(causeVal,i){
					causeArr.push(causeVal.DATA_NAME);
				})
				this.defectReasonColumns = causeArr;
			})
		},
		//原因分析选择模态框确认按钮点击事件
		defectReasonChange(picker, values, index){
			this.formItem.defectReason = values;
		},
		defectReasonConfirm(selected){
			this.formItem.defectReason = selected;
			// console.log('selected',selected);
			this.defectReasonFlag = false;
			this.putData()
		},
		//原因分析选择模态框取消按钮点击事件
		defectReasonCancel(){
			this.defectReasonFlag = false;
		}
    },
    mounted() {
        this.getData()
		this.putData()
		// this.upLoad()
    }
}
</script>